<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
	  xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<div th:include="css :: css"></div>
	<link href="https://cdn.bootcss.com/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/Swiper/4.2.6/js/swiper.min.js"></script>
	<!-- //animation-effect -->
</head>
	
<body>
<div >
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
	<div id="content">
<!-- banner -->
	<div class="">
		<div class="container">
			<!-- Swiper -->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"  v-for="item in prclist">
						<img   v-bind:src="item"   alt="" class="img-responsive">
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination-white"></div>
				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>
			</div>


		</div>
	</div>
<!-- //banner -->
<!-- collections -->
	<div class="new-collections" >
		<div class="container">
			<h3 class="animated wow zoomIn" data-wow-delay=".5s">最新推荐</h3>
			<p class="est animated wow zoomIn" data-wow-delay=".5s">最新商品推荐</p>
			<div class="row">
				                                  <!--v-if="index<=5"-->
				<div class="col-md-3 " v-for="(item,index)  in list.slice(0, 8)" >
					<div class="new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
						<div class="new-collections-grid1-image">
							<a href="javascript:alert('nishishei')" class="product-image"><img v-bind:src="item.prc" alt=" " class="img-responsive" /></a>
							<div class="new-collections-grid1-image-pos">

								<a v-on:click="gotosingle(item.id)" >去看看</a>
								<!--onclick="gotosingle(2)"-->
							</div>
						</div>
						<h4><a href="single.html">{{item.name}}</a></h4>
						<p>销量：{{item.salesVolume}} &nbsp; &nbsp;库存量：{{item.stock}}</p>
						<div class="new-collections-grid1-left simpleCart_shelfItem">
							<p><span class="item_price">	￥{{item.price}}</span><a class="item_add" v-on:click="addcart(item.id)">添加到购物车 </a></p>
						</div>
					</div>
				
				</div>

				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //collections -->
	</div>
<!-- footer -->
<div th:include="footer::footer"></div>
</div>
<!-- //footer -->
<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        effect: 'fade',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
<script>
    var vm = new Vue({
        el: '#content',
        data: {
            list:[],
			prclist:[]
        },
        methods: {
            gotosingle: function (id) {
                // 方法内 `this` 指向 vm
                gotosingle(id);
            },
            addcart: function (id) {
                // 方法内 `this` 指向 vm
                addcart(id,1);
            }
        }
    })

    $.ajax({
    	url: '/goods/find/del',
    	type: 'GET',
    })
    .done(function(res) {
    	console.log(res.obj)
    	vm.list = res.obj
    	console.log("success");
    })
    .fail(function() {
    	console.log("error");
    })
    .always(function() {
    	console.log("complete");
    });


    $.ajax({
        url: 'index/prc',
        type: 'GET',
    })
        .done(function(res) {
            console.log(res)
            vm.prclist = res
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
</script>
</body>
</html>
